﻿<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
	<head>
		<!-- Standard Meta -->
		<c:import url="../common/meda.jsp"></c:import>
		<!-- Site Properties -->
		<title>${college.college_name}-${sysDesc}</title>
		<link rel="stylesheet" type="text/css" href="/css/semantic.css">
		<link rel="stylesheet" type="text/css" href="/css/common.css">
		<link rel="stylesheet" type="text/css" href="/css/college.css">
		
		<style type="text/css">
			@media only screen and (max-width: 767px) {
				#secondMenuLaunch {
					display:inline-block;
				}
				#collegeSecondLeftMenu {
					display:none;
				}
			}
			
		</style>

		<script src="/js/jquery.min.js"></script>
		<script src="/js/semantic.js"></script>
		<script src="/js/common.js"></script>
		<script src="//${static_server }/js/title_menu.js"></script>
		<script src="/js/college.js"></script>
		
		<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
	</head>
	<body class="pushable">
		<c:import url="../common/title_menu.jsp"></c:import>
		<div class="pusher">
			<c:import url="../common/school_header.jsp?college_id=${college.college_id }&college_name=${college.college_name }&english_name=${college.collegeDetailVO.english_name }&q211=${college.qualification_211 }&q985=${college.qualification_985 }&qy=${college.qualification_graduate }"></c:import>
			<div id="schoolbodysegment" class="ui vertical masthead segment">
				<div class="ui container">
					<div class="ui stackable grid">
						<div class="three wide column">
						</div>
						<div class="nine wide column">
							<div class="ui basic segment" id="schoolmaincontent">
								${college.collegeDetailVO.introduction }
							</div>
						</div>
						<div class="four wide column">
							<div class="ui fluid centered special card">
								<div class="blurring dimmable image">
									<div class="ui dimmer">
										<div class="content">
											<div class="ui buttons">
												<a class="ui orange inverted button" href='<c:if test="${!fn:startsWith(college.collegeDetailVO.college_site, 'http')}">http://</c:if>${college.collegeDetailVO.college_site}' target="_blank">
													进入官网
												</a>
												<a class="ui orange inverted button" href="http://baike.baidu.com/search/word?word=${college.college_name }" target="_blank">
													百度百科
												</a>
											</div>
										</div>
									</div>
									<img src="/images/${college.college_id}/rightImage.jpg">
								</div>
								<div class="content">
									<a class="header">${college.college_name}</a>
									<div class="meta"></div>
									<div class="description">
										<div class="ui divided  grid ">
											<div class="row">
												<div class="six wide column">
													<div class="item">
														院校类型
													</div>
												</div>
												<div class="ten wide column">
													<div class="item">
														${college.type }
													</div>
												</div>
											</div>
											<div class="row">
												<div class="six wide column">
													<div class="item">
														办学层次
													</div>
												</div>
												<div class="ten wide column">
													<div class="item">
														${college.education_level }
													</div>
												</div>
											</div>
											<div class="row">
												<div class="six wide column">
													<div class="item">
														办学类型
													</div>
												</div>
												<div class="ten wide column">
													<div class="item">
														${college.principle }
													</div>
												</div>
											</div>
											<div class="row">
												<div class="six wide column">
													<div class="item">
														学校隶属
													</div>
												</div>
												<div class="ten wide column">
													<div class="item">
														${college.belongs }
													</div>
												</div>
											</div>
											<div class="row">
												<div class="six wide column">
													<div class="item">
														所在地
													</div>
												</div>
												<div class="ten wide column">
													<div class="item">
														${college.location }
													</div>
												</div>
											</div>
											<div class="row">
												<div class="six wide column">
													<div class="item">
														通讯地址
													</div>
												</div>
												<div class="ten wide column">
													<div class="item">
														${college.collegeDetailVO.address}
													</div>
												</div>
											</div>
											<div class="row">
												<div class="six wide column">
													<div class="item">
														联系电话
													</div>
												</div>
												<div class="ten wide column">
													<div class="item">
														${college.collegeDetailVO.phone}
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="extra content">
									<a> <i class="heart icon"></i>2</a>
								</div>
							</div>
							<h4 class="ui horizontal clearing divider header"> 百度地图 </h4>
							<div class="ui fluid card">
								<div id="dituContent" style="min-height: 250px;"></div>
							</div>
							<h4 class="ui horizontal divider header"> 其他相关院校 </h4>
							<c:import url="../common/same_college.jsp"></c:import>
						</div>
					</div>
				</div><!-- content container end -->
			</div><!-- schoolbodycontainer end -->
			<c:import url="../common/footer.jsp"></c:import>
		</div><!-- pusher end -->
	</body>
	<script type="text/javascript">
		//创建和初始化地图函数：
		function initMap() {
			createMap();
			//创建地图
			setMapEvent();
			//设置地图事件
			addMapControl();
			//向地图添加控件
			addMarker();
			//向地图中添加marker
		}

		//创建地图函数：
		function createMap() {
			var map = new BMap.Map("dituContent");
			//在百度地图容器中创建一个地图
			var point = new BMap.Point(${college.collegeDetailVO.location});
			//定义一个中心点坐标
			map.centerAndZoom(point, 15);
			//设定地图的中心点和坐标并将地图显示在地图容器中
			window.map = map;
			//将map变量存储在全局
		}

		//地图事件设置函数：
		function setMapEvent() {
			map.enableDragging();
			//启用地图拖拽事件，默认启用(可不写)
			map.enableScrollWheelZoom();
			//启用地图滚轮放大缩小
			map.enableDoubleClickZoom();
			//启用鼠标双击放大，默认启用(可不写)
			map.enableKeyboard();
			//启用键盘上下左右键移动地图
		}

		//地图控件添加函数：
		function addMapControl() {
			//向地图中添加缩放控件
			var ctrl_nav = new BMap.NavigationControl({
				anchor : BMAP_ANCHOR_TOP_RIGHT,
				type : BMAP_NAVIGATION_CONTROL_SMALL
			});
			map.addControl(ctrl_nav);
		}

		//标注点数组
		var markerArr = [{
			title : "${college.college_name}",
			content : "${colelge.collegeDetailVO.english_name}",
			point : "${college.collegeDetailVO.location}",
			isOpen : 0,
			icon : {
				w : 21,
				h : 21,
				l : 0,
				t : 0,
				x : 6,
				lb : 5
			}
		}];
		//创建marker
		function addMarker() {
			for (var i = 0; i < markerArr.length; i++) {
				var json = markerArr[i];
				var p0 = json.point.split(",")[0];
				var p1 = json.point.split(",")[1];
				var point = new BMap.Point(p0, p1);
				var iconImg = createIcon(json.icon);
				var marker = new BMap.Marker(point, {
					icon : iconImg
				});
				var iw = createInfoWindow(i);
				var label = new BMap.Label(json.title, {
					"offset" : new BMap.Size(json.icon.lb - json.icon.x + 10, -20)
				});
				marker.setLabel(label);
				map.addOverlay(marker);
				label.setStyle({
					borderColor : "#808080",
					color : "#333",
					cursor : "pointer"
				});

				(function() {
					var index = i;
					var _iw = createInfoWindow(i);
					var _marker = marker;
					_marker.addEventListener("click", function() {
						this.openInfoWindow(_iw);
					});
					_iw.addEventListener("open", function() {
						_marker.getLabel().hide();
					})
					_iw.addEventListener("close", function() {
						_marker.getLabel().show();
					})
					label.addEventListener("click", function() {
						_marker.openInfoWindow(_iw);
					})
					if (!!json.isOpen) {
						label.hide();
						_marker.openInfoWindow(_iw);
					}
				})()
			}
		}

		//创建InfoWindow
		function createInfoWindow(i) {
			var json = markerArr[i];
			var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
			return iw;
		}

		//创建一个Icon
		function createIcon(json) {
			var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), {
				imageOffset : new BMap.Size(-json.l, -json.t),
				infoWindowOffset : new BMap.Size(json.lb + 5, 1),
				offset : new BMap.Size(json.x, json.h)
			})
			return icon;
		}

		initMap();
		//创建和初始化地图
	</script>
</html>
